<template>
	<view class="page">
		<image class="loginBg" src="../../static/images/other/loginBg.png" mode="widthFix"></image>
		<view class="topBox">
			<view class="icon" @click="goBack()">
				<u-icon name="arrow-left" color="#000" size="40"></u-icon>
			</view>
			<view class="text">
				<view class="title">
					臻品盒子欢迎您
				</view>
				<view class="tips">
					如无账号，请点击 <text class="activeText" @click="goPage('/pages/login/registered')">立即注册</text>
				</view>
			</view>
		</view>
		<view class="form">
			<u-form :model="form" ref="uForm" >
					<u-form-item :border-bottom="false" prop="phone">
						<view class="inputRow">
							<image src="../../static/images/prefile/userIcon.png" mode="phone"></image>
							<u-input  :custom-style="customStyle" placeholder="请输入手机号" v-model="form.phone" />
							
						</view>
					
					</u-form-item>
					<u-form-item  :border-bottom="false"  prop="pwd">
						<view class="inputRow">
							<image  src="../../static/images/prefile/pwdIcon.png" mode=""></image>
							<u-input :custom-style="customStyle" placeholder="请输入密码" type="password" v-model="form.pwd" password-icon />
						</view>
					</u-form-item>
			</u-form>
			<view class="fromTips" @click="goPage('/pages/login/forgotPwd')">
					忘记密码？
			</view>
		</view>
		<view class="login-btn" @click="registered">
			登录
		</view>
		<view class="loginTips">
			登录表示您已阅读并同意 <text class="activeText">《隐私政策》</text>和 <text class="activeText">《服务协议》</text>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					// phone:'13229029737',
					phone:'',
					// pwd: '123456',
					pwd: '',
				},
				customStyle:{
					height: '97rpx',
					width : '450rpx',
					// borderRadius: '20rpx',
				},
				rules: {
					phone: [
						{ 
							required: true, 
							message: '请输入手机号', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
						}
					],
					pwd: [
						{
							required: true,
							message: '请输入密码', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					]
				}
			};
		},
		methods:{
			registered (){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.myHttp({
							url: '/api/login/login',
							data:{
								username : this.form.phone,
								password : this.form.pwd,
							
							}
						}).then(res=>{
							if(res.code == 0){
								uni.showToast({
									title: '登录成功',
									duration: 3000,
								});
								uni.setStorageSync('token',res.data.token)
								uni.setStorageSync('mid',res.data.member_id)
							
								setTimeout(()=>{
									uni.reLaunch({
										url: '/pages/index/index'
									})
								},1500)
							}
						})
						
					} else {
						// console.log('验证失败');
					}
				});
			}
		},
		onReady() {
				this.$refs.uForm.setRules(this.rules);
		},
		components:{
			
		},
		filters:{
			
		},
	}
</script>

<style lang="scss" scoped>
.page{
	font-family: PingFang SC;
	width: 100%;
	@include flexCol;
	align-items: center;
	.loginBg{
		position: fixed;
		top: -15%;
		right: -20%;
		z-index: -1;
		width: 714rpx;
		height: 390rpx;
		transform: translate(1.5);
	}
	.topBox{
		height: 380rpx;
		padding-top: 100rpx;
		display: flex;
		width: 100%;
		.icon{
			width: 100rpx;
			display: flex;
			align-items: flex-start;
			justify-content: center;
		}
		.text{
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			padding-bottom: 90rpx;
			.title{
				font-size: 65rpx;
				font-weight: bold;
				color: #1E1C1C;
				margin-bottom: 28rpx;
			}
			.tips{
				font-size: 27rpx;
				font-family: PingFang SC;
				color: #1E1C1C;

			}
		}
	}
	
	.form{		
		width: 650rpx;
		.inputRow{
			display: flex;
			align-items: center;
			width: 650rpx;
			background: #F6F6F6;
			border-radius: 20rpx;
			padding-right: 20rpx;
			image{
				width: 33rpx;
				height: 37rpx;
				margin: 0 33rpx;
			}
		}
		.fromTips{
			color: #9E9B9B;
			font-size: 26rpx;
			margin-top: 33rpx;
		}
	}
	.login-btn{
		width: 650rpx;
		height: 97rpx;
		background: $themeColor;
		border-radius: 20rpx;
		color: #fff;
		@include flexCenter;
		margin: 70rpx 0 34rpx;
	}
	.loginTips{
		font-size: 22rpx;
		color: #8D8D8D;
	}
	.activeText{
		color: $themeColor;
	}
	
}
</style>
